<ons-page>
    <ons-toolbar>
        <div class="left">
            <ons-back-button>返回</ons-back-button>
        </div>
        <div class="center">Dialog 对话框</div>
    </ons-toolbar>

    <div style="padding: 20px;">
        <!-- 统一代码显示区域 -->
        <div class="code-example-container" style="margin-bottom: 30px;">
            <div class="code-actions" onclick="toggleCode('all-dialog-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-all-dialog-code" icon="md-chevron-down"></ons-icon>
                    <span>查看完整代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-all-dialog-code" onclick="event.stopPropagation(); copyCode('all-dialog-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-all-dialog-code">
                <pre><code id="code-content-all-dialog-code">&lt;!-- ==================== HTML ==================== --&gt;

&lt;!-- Alert 警告框 --&gt;
&lt;ons-button onclick="showAlert()"&gt;显示 Alert&lt;/ons-button&gt;

&lt;!-- Confirm 确认框 --&gt;
&lt;ons-button onclick="showConfirm()"&gt;显示 Confirm&lt;/ons-button&gt;

&lt;!-- Prompt 输入框 --&gt;
&lt;ons-button onclick="showPrompt()"&gt;显示 Prompt&lt;/ons-button&gt;

&lt;!-- 自定义 Dialog --&gt;
&lt;ons-button onclick="showCustomDialog()"&gt;显示自定义对话框&lt;/ons-button&gt;

&lt;!-- Dialog 定义 --&gt;
&lt;ons-dialog id="customDialog" cancelable&gt;
    &lt;div style="text-align: center; padding: 20px;"&gt;
        &lt;p style="margin-bottom: 20px;"&gt;
            &lt;ons-icon icon="md-info" size="60px" style="color: #4a90e2;"&gt;&lt;/ons-icon&gt;
        &lt;/p&gt;
        &lt;h3&gt;自定义对话框&lt;/h3&gt;
        &lt;p style="margin: 20px 0; color: #666;"&gt;
            这是一个自定义的对话框内容，可以包含任何 HTML 元素。
        &lt;/p&gt;
        &lt;ons-button modifier="cta" onclick="hideCustomDialog()"&gt;关闭&lt;/ons-button&gt;
    &lt;/div&gt;
&lt;/ons-dialog&gt;

&lt;!-- Toast 提示 --&gt;
&lt;ons-button onclick="showToast()"&gt;显示 Toast&lt;/ons-button&gt;

&lt;!-- Action Sheet --&gt;
&lt;ons-button onclick="showActionSheet()"&gt;显示 Action Sheet&lt;/ons-button&gt;

&lt;!-- Action Sheet 定义 --&gt;
&lt;ons-action-sheet id="myActionSheet" cancelable&gt;
    &lt;ons-action-sheet-button onclick="actionSelected('选项 1')"&gt;选项 1&lt;/ons-action-sheet-button&gt;
    &lt;ons-action-sheet-button onclick="actionSelected('选项 2')"&gt;选项 2&lt;/ons-action-sheet-button&gt;
    &lt;ons-action-sheet-button onclick="actionSelected('选项 3')"&gt;选项 3&lt;/ons-action-sheet-button&gt;
    &lt;ons-action-sheet-button modifier="destructive" onclick="actionSelected('删除')"&gt;删除&lt;/ons-action-sheet-button&gt;
    &lt;ons-action-sheet-button onclick="hideActionSheet()"&gt;取消&lt;/ons-action-sheet-button&gt;
&lt;/ons-action-sheet&gt;


&lt;!-- ==================== JavaScript ==================== --&gt;
&lt;script&gt;
// Alert 警告框
function showAlert() {
    ons.notification.alert('这是一个警告框！');
}

// Confirm 确认框
function showConfirm() {
    ons.notification.confirm({
        message: '确定要执行此操作吗？',
        title: '确认',
        buttonLabels: ['取消', '确定'],
        callback: function(index) {
            if (index === 1) {
                ons.notification.toast('已确认', { timeout: 1500 });
            } else {
                ons.notification.toast('已取消', { timeout: 1500 });
            }
        }
    });
}

// Prompt 输入框
function showPrompt() {
    ons.notification.prompt({
        message: '请输入您的名字：',
        title: '输入',
        placeholder: '名字',
        callback: function(name) {
            if (name) {
                ons.notification.toast('你好，' + name + '！', { timeout: 2000 });
            }
        }
    });
}

// 自定义 Dialog
function showCustomDialog() {
    document.getElementById('customDialog').show();
}

function hideCustomDialog() {
    document.getElementById('customDialog').hide();
}

// Toast 提示
function showToast() {
    ons.notification.toast('这是一个 Toast 提示', {
        timeout: 2000,
        animation: 'fall'
    });
}

// Action Sheet
function showActionSheet() {
    document.getElementById('myActionSheet').show();
}

function hideActionSheet() {
    document.getElementById('myActionSheet').hide();
}

function actionSelected(action) {
    hideActionSheet();
    ons.notification.toast('选择了: ' + action, { timeout: 1500 });
}
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <h3>Alert 警告框</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-button onclick="showAlert()">显示 Alert</ons-button>
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('alert-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-alert-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-alert-code" onclick="event.stopPropagation(); copyCode('alert-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-alert-code">
                <pre><code id="code-content-alert-code">&lt;!-- HTML --&gt;
&lt;ons-button onclick="showAlert()"&gt;显示 Alert&lt;/ons-button&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function showAlert() {
    ons.notification.alert('这是一个警告框！');
}
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">Confirm 确认框</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-button onclick="showConfirm()">显示 Confirm</ons-button>
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('confirm-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-confirm-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-confirm-code" onclick="event.stopPropagation(); copyCode('confirm-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-confirm-code">
                <pre><code id="code-content-confirm-code">&lt;!-- HTML --&gt;
&lt;ons-button onclick="showConfirm()"&gt;显示 Confirm&lt;/ons-button&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function showConfirm() {
    ons.notification.confirm({
        message: '确定要执行此操作吗？',
        title: '确认',
        buttonLabels: ['取消', '确定'],
        callback: function(index) {
            if (index === 1) {
                ons.notification.toast('已确认', { timeout: 1500 });
            } else {
                ons.notification.toast('已取消', { timeout: 1500 });
            }
        }
    });
}
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">Prompt 输入框</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-button onclick="showPrompt()">显示 Prompt</ons-button>
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('prompt-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-prompt-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-prompt-code" onclick="event.stopPropagation(); copyCode('prompt-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-prompt-code">
                <pre><code id="code-content-prompt-code">&lt;!-- HTML --&gt;
&lt;ons-button onclick="showPrompt()"&gt;显示 Prompt&lt;/ons-button&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function showPrompt() {
    ons.notification.prompt({
        message: '请输入您的名字：',
        title: '输入',
        placeholder: '名字',
        callback: function(name) {
            if (name) {
                ons.notification.toast('你好，' + name + '！', { timeout: 2000 });
            }
        }
    });
}
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">自定义 Dialog</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-button onclick="showCustomDialog()">显示自定义对话框</ons-button>
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('custom-dialog-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-custom-dialog-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-custom-dialog-code" onclick="event.stopPropagation(); copyCode('custom-dialog-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-custom-dialog-code">
                <pre><code id="code-content-custom-dialog-code">&lt;!-- HTML --&gt;
&lt;ons-button onclick="showCustomDialog()"&gt;显示自定义对话框&lt;/ons-button&gt;

&lt;!-- Dialog 定义 --&gt;
&lt;ons-dialog id="customDialog" cancelable&gt;
    &lt;div style="text-align: center; padding: 20px;"&gt;
        &lt;p style="margin-bottom: 20px;"&gt;
            &lt;ons-icon icon="md-info" size="60px" style="color: #4a90e2;"&gt;&lt;/ons-icon&gt;
        &lt;/p&gt;
        &lt;h3&gt;自定义对话框&lt;/h3&gt;
        &lt;p style="margin: 20px 0; color: #666;"&gt;
            这是一个自定义的对话框内容，可以包含任何 HTML 元素。
        &lt;/p&gt;
        &lt;ons-button modifier="cta" onclick="hideCustomDialog()"&gt;关闭&lt;/ons-button&gt;
    &lt;/div&gt;
&lt;/ons-dialog&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function showCustomDialog() {
    document.getElementById('customDialog').show();
}

function hideCustomDialog() {
    document.getElementById('customDialog').hide();
}
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">Toast 提示</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-button onclick="showToast()">显示 Toast</ons-button>
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('toast-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-toast-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-toast-code" onclick="event.stopPropagation(); copyCode('toast-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-toast-code">
                <pre><code id="code-content-toast-code">&lt;!-- HTML --&gt;
&lt;ons-button onclick="showToast()"&gt;显示 Toast&lt;/ons-button&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function showToast() {
    ons.notification.toast('这是一个 Toast 提示', {
        timeout: 2000,
        animation: 'fall'
    });
}
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">Action Sheet</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-button onclick="showActionSheet()">显示 Action Sheet</ons-button>
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('action-sheet-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-action-sheet-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-action-sheet-code" onclick="event.stopPropagation(); copyCode('action-sheet-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-action-sheet-code">
                <pre><code id="code-content-action-sheet-code">&lt;!-- HTML --&gt;
&lt;ons-button onclick="showActionSheet()"&gt;显示 Action Sheet&lt;/ons-button&gt;

&lt;!-- Action Sheet 定义 --&gt;
&lt;ons-action-sheet id="myActionSheet" cancelable&gt;
    &lt;ons-action-sheet-button onclick="actionSelected('选项 1')"&gt;选项 1&lt;/ons-action-sheet-button&gt;
    &lt;ons-action-sheet-button onclick="actionSelected('选项 2')"&gt;选项 2&lt;/ons-action-sheet-button&gt;
    &lt;ons-action-sheet-button onclick="actionSelected('选项 3')"&gt;选项 3&lt;/ons-action-sheet-button&gt;
    &lt;ons-action-sheet-button modifier="destructive" onclick="actionSelected('删除')"&gt;删除&lt;/ons-action-sheet-button&gt;
    &lt;ons-action-sheet-button onclick="hideActionSheet()"&gt;取消&lt;/ons-action-sheet-button&gt;
&lt;/ons-action-sheet&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function showActionSheet() {
    document.getElementById('myActionSheet').show();
}

function hideActionSheet() {
    document.getElementById('myActionSheet').hide();
}

function actionSelected(action) {
    hideActionSheet();
    ons.notification.toast('选择了: ' + action, { timeout: 1500 });
}
&lt;/script&gt;</code></pre>
            </div>
        </div>
    </div>

    <!-- 自定义对话框 -->
    <ons-dialog id="customDialog" cancelable>
        <div style="text-align: center; padding: 20px;">
            <p style="margin-bottom: 20px;">
                <ons-icon icon="md-info" size="60px" style="color: #4a90e2;"></ons-icon>
            </p>
            <h3>自定义对话框</h3>
            <p style="margin: 20px 0; color: #666;">
                这是一个自定义的对话框内容，可以包含任何 HTML 元素。
            </p>
            <ons-button modifier="cta" onclick="hideCustomDialog()">关闭</ons-button>
        </div>
    </ons-dialog>

    <!-- Action Sheet -->
    <ons-action-sheet id="myActionSheet" cancelable>
        <ons-action-sheet-button onclick="actionSelected('选项 1')">选项 1</ons-action-sheet-button>
        <ons-action-sheet-button onclick="actionSelected('选项 2')">选项 2</ons-action-sheet-button>
        <ons-action-sheet-button onclick="actionSelected('选项 3')">选项 3</ons-action-sheet-button>
        <ons-action-sheet-button modifier="destructive" onclick="actionSelected('删除')">删除</ons-action-sheet-button>
        <ons-action-sheet-button onclick="hideActionSheet()">取消</ons-action-sheet-button>
    </ons-action-sheet>

    <script src="../js/code-display.js"></script>
    <script>
        function showAlert() {
            ons.notification.alert('这是一个警告框！');
        }

        function showConfirm() {
            ons.notification.confirm({
                message: '确定要执行此操作吗？',
                title: '确认',
                buttonLabels: ['取消', '确定'],
                callback: function(index) {
                    if (index === 1) {
                        ons.notification.toast('已确认', { timeout: 1500 });
                    } else {
                        ons.notification.toast('已取消', { timeout: 1500 });
                    }
                }
            });
        }

        function showPrompt() {
            ons.notification.prompt({
                message: '请输入您的名字：',
                title: '输入',
                placeholder: '名字',
                callback: function(name) {
                    if (name) {
                        ons.notification.toast('你好，' + name + '！', { timeout: 2000 });
                    }
                }
            });
        }

        function showCustomDialog() {
            document.getElementById('customDialog').show();
        }

        function hideCustomDialog() {
            document.getElementById('customDialog').hide();
        }

        function showToast() {
            ons.notification.toast('这是一个 Toast 提示', {
                timeout: 2000,
                animation: 'fall'
            });
        }

        function showActionSheet() {
            document.getElementById('myActionSheet').show();
        }

        function hideActionSheet() {
            document.getElementById('myActionSheet').hide();
        }

        function actionSelected(action) {
            hideActionSheet();
            ons.notification.toast('选择了: ' + action, { timeout: 1500 });
        }
    </script>
</ons-page>
